<template>
	<view>
		<view class="box">

			<view class="tab_box tac flex_box">
				<view class="item">
					<view class="item_tab" :class="currentIndex === 0 ? 'active' : ''" @click="getList(0)">可使用</view>
				</view>
				<view class="item">
					<view class="item_tab" :class="currentIndex === 1 ? 'active' : ''" @click="getList(1)">已使用</view>
				</view>
				<view class="item">
					<view class="item_tab" :class="currentIndex === 2 ? 'active' : ''" @click="getList(2)">已过期</view>
				</view>
			</view>

			<view class="pa30">

			<view v-if="list.length <= 0" style="margin-top: calc(50vh - 300rpx);">
				<u-empty
				font-size="30rpx"
				icon-size="400rpx" 	
				 text="暂无加价券" 
				 src="/static/empty/coupon.png" 
				 mode="coupon"></u-empty>
			</view>
			
			<!-- <page-status status="empty"></page-status> -->
				
			<view v-if="list.length > 0" class="card_sty mb30" v-for="item in list" :key="item.id">
				<view class="flex_box aic">
					<view class="mr30 " style="width: 200rpx;position: relative;">
						<text class="fs36 cor_F46">￥</text><text class="fs48 cor_F46">{{item.money}}</text>
					</view>
					<view class="item ov">
						<view class="fs30 fwb">{{item.name}}</view>
						<view class="mt20 cor_A1A">{{item.condition}}</view>
						<view class="mt15 cor_A1A">{{item.effective_time}}</view>
					</view>
					<view class="w185 r_bl1 df aic jcc">
						<view class="opr_btn_1"  v-if="item.status == 0" >去使用</view>
						<view class="opr_btn_2" v-if="item.status == 1" >已使用</view>
						<view class="opr_btn_2" v-if="item.status == 2" >已过期</view>
					</view>
				</view>
			</view>
				

				<!-- 已使用 -->
			

			</view>

		</view><!-- box -->
	</view>
</template>

<script setup lang="ts">
	import { apiCouponList, apiCouponGet, apiMyCouponList } from '@/api/coupon'
	import { onLoad, onShow, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app'
	import { computed, reactive, ref, shallowRef, watch, nextTick } from 'vue'
	import { showImage, call, copy, lookMap } from "@/utils/tools.ts"
	import { storeToRefs } from 'pinia'
	import { useUserStore } from '@/stores/user'
	const userStore = useUserStore()
	const { userInfo, isLogin } = storeToRefs(userStore)

	const list = ref([]);
	const currentIndex = ref(0);

	const getList = async (status : any) => {
		uni.showLoading({
			title:'加载中'
		})
		currentIndex.value = status;
		let data = await apiMyCouponList({ status: status });
		list.value = data.lists
		uni.hideLoading();
	}


	onShow(() => {
		getList(0);
	})
</script>

<style>
	page {
		background: #F4F6F8;
		padding-top: 80rpx;
	}

	.tab_box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: 5;
	}

	.tab_box .item_tab {
		position: relative;
		display: inline-flex;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #333;
	}

	.tab_box .item_tab::after {
		content: "";
		display: none;
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 60rpx;
		height: 6rpx;
		background: #F0370D;
		border-radius: 3rpx;
		z-index: 2;
		margin-left: -30rpx;
	}

	.tab_box .active.item_tab::after {
		display: block;
	}

	.card_sty {
		position: relative;
		padding: 30rpx 0 30rpx 30rpx;
		font-size: 24rpx;
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.card_sty::before {
		content: "";
		position: absolute;
		right: 168rpx;
		width: 30rpx;
		height: 30rpx;
		background: #F4F6F8;
		border-radius: 50%;
		z-index: 2;
	}

	.card_sty::after {
		content: "";
		position: absolute;
		right: 168rpx;
		width: 30rpx;
		height: 30rpx;
		background: #F4F6F8;
		border-radius: 50%;
		z-index: 2;
	}

	.card_sty::after {
		top: -15rpx;
	}

	.card_sty::before {
		bottom: -15rpx;
	}

	.opr_btn_1,
	.opr_btn_2 {
		position: relative;
		width: 120rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		font-size: 26rpx;
		color: #fff;
		border-radius: 8rpx;
	}

	.opr_btn_1 {
		background: linear-gradient(90deg, #FF791A 0%, #EF330C 100%);
		box-shadow: 0rpx 6rpx 20rpx 0rpx #FFAE9A;
	}

	.opr_btn_2 {
		background: #ccc;
	}

	.popup_area_sty {
		position: relative;
		width: 440rpx;
		padding: 40rpx;
		background: #fff;
		border-radius: 20rpx;
	}

	.rule_h_acroll {
		position: relative;
		font-size: 30rpx;
		line-height: 44rpx;
		color: #333;
		max-height: 320rpx;
		overflow-y: auto;
	}

	.btn_ok_sty {
		position: relative;
		width: 200rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background: linear-gradient(90deg, #FF791A 0%, #EF330C 100%);
		box-shadow: 0rpx 6rpx 20rpx 0rpx #FFAE9A;
		border-radius: 34rpx;
		margin-left: auto;
		margin-right: auto;
	}
</style>